<template>
   <div>
      <div v-if="img">
         <img :src="img" alt="">
      </div>
      <div class="update">
         <input type="file" value="上传头像" @change="upimg($event)">
      </div>
      <div>
         <button type="button"
                 @click="_clickUpdate"
         >确定
         </button>
      </div>
   </div>
</template>

<script>
   export default {
      name: 'update-box-img',
      data() {
         return {
            img: '',
            SuffixName: '',
            imgPath: '',
            imgName: '',
            file: ''
         }
      },
      methods: {
         upimg(e) {
            var file = e.target.files[0]
            let SuffixName = e.target.value
            this.imgName = e.target.files[0].name
            this.imgPath = e.target.value
            this.file = file
            console.log(Boolean(file))
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
               alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
               return false
            }
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = (e) => {
               this.SuffixName = SuffixName.slice(SuffixName.lastIndexOf('.'), SuffixName.length)
               this.img = e.target.result
            }
         },
         async _clickUpdate() {
            if (!this.file) {
               return
            }
            let file = this.file
            let param = new FormData()
            param.append('file', file, file.name)
            console.log(param.get('file'))
            let config = {
               headers:{'Content-Type':'multipart/form-data'}
            }
            let data = await this.$axios.post('/apis/update', param, config)
            console.log(data)
         }
      }
   }
</script>

<style scoped>

</style>
